
const { resolve } = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const argv = require("yargs-parser")(process.argv.slice(2));
const _mode = argv.mode || "development";
const _mergeConfig = require(`./config/webpack.${_mode}.js`);
const WebpackBar = require("webpackbar");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const _modeFlag = _mode === "production";
const cssLoaders = [
  MiniCssExtractPlugin.loader,
  {
    loader:"css-loader",
    options:{
      importLoaders:1
    }
  },
  {
    loader:"postcss-loader"
  }
]

/**
 * @type {import('webpack').Configuration}
 */
const webpackBaseConfig = {
  cache: {
    type: "filesystem",
    // cacheDirectory: resolve(__dirname, '.temp'),
  },
  entry: {
    main: resolve("src/web/index.tsx"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "swc-loader",
        },
        
      },
      {
        test: /\.(css|scss)$/,
        use: cssLoaders
      },
      {
          test: /\.(png|jpg|jpeg|gif|eot|woff|woff2|ttf|svg|otf|webp)$/,
          type: "asset"
      },
    ],
  },
  // externals: {
  //   react: "React",
  //   "react-dom": "ReactDOM",
  //   "react-router-dom": "ReactRouterDOM",
  //   recoil: "Recoil",
  // },
  optimization: {
    runtimeChunk:{
      name:"runtime"
    },
    //规则
    splitChunks: {
      chunks:"async",
      maxAsyncRequests:5,
      maxInitialRequests:4,
      // enforceSizeThreshold: 50000,
      minChunks:2,
      cacheGroups:{
        vendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        commons:{
          // chunks: 'initial',
          priority: -20,
          name:"commons",
          minChunks:2,
          reuseExistingChunk: true,
          enforce: true
        }
      },
      //只有超过了这个字节的才会打包
      // 要不要打这个总包出来
      minSize:{
        javascript:0,
        style: 0
      },
      //经验值 拆掉abc ->总包
      maxSize:{
        javascript:110000,
        style: 110000
      }
    }
  },
  resolve: {
    alias: {
      "@web":resolve("src/web"),
      "@com": resolve("src/web/com"),
      "@api": resolve("src/web/api"),
      "@config": resolve("src/web/appConfig"),
      "@pages": resolve("src/web/pages"),
      "@assets": resolve("src/web/assets"),
      "@widgets": resolve("src/web/widgets"),
      "@hooks":resolve("src/web/com/hooks"),
      "@models":resolve("src/web/com/models"),
      "@recoil":resolve("src/web/com/recoil"),
      "@layout":resolve("src/web/com/ui/layout"),
      "@components":resolve("src/web/com/ui/components"),
    },
    extensions: [".js", ".ts", ".tsx", "jsx"],
  },
  plugins: [
    new WebpackBar(),
    new webpack.ProvidePlugin({
      React:"React"
    }),
    new MiniCssExtractPlugin({
      filename: _modeFlag ? "styles/[name].[contenthash:5].css" : "styles/[name].css",
      chunkFilename: _modeFlag ? "styles/[id].[contenthash:5].css" : "styles/[id].css",
      ignoreOrder: true,
  })
  ],
};

module.exports = merge.default(webpackBaseConfig, _mergeConfig);
